<!--请求追踪-->
<template>
  <div class="app-container">
    <!--列表-->
    <div class="table-container flex-main">
      <div class="table-container-header">
        <el-alert
          type="success"
          show-icon
          :closable="false">
          <div slot="title">
            上次更新时间：{{ updateTime | formatDate(T.DATE_TIME_FMT1) }}，一共追踪到{{ dataSource.length }}条近期HTTP请求记录
            <el-divider direction="vertical" />
            <el-link type="primary" :underline="false" @click="handleClickUpdate">立即更新</el-link>
          </div>
        </el-alert>
      </div>
      <el-table
        ref="multipleTable"
        :data="dataSource"
        row-key="id"
        header-cell-class-name="table-header"
        fit
        height="100%"
        highlight-current-row>
        <el-table-column align="center" prop="id" label="#" width="60">
          <template slot-scope="scope">{{ scope.$index+1 }}</template>
        </el-table-column>
        <el-table-column label="请求时间" prop="timestamp" align="center" width="150">
          <template slot-scope="scope">
            {{ new Date(scope.row.timestamp) | formatDate }}
          </template>
        </el-table-column>
        <el-table-column label="请求方法" prop="method" align="center" sortable width="100" show-overflow-tooltip>
          <template slot-scope="scope">
            {{ scope.row.request.method }}
          </template>
        </el-table-column>
        <el-table-column label="请求URL" prop="uri" align="left" min-width="200" show-overflow-tooltip>
          <template slot-scope="scope">
            {{ scope.row.request.uri }}
          </template>
        </el-table-column>

        <el-table-column align="center" prop="status" sortable label="响应状态" min-width="100">
          <template slot-scope="scope">
            {{ scope.row.response.status }}
          </template>
        </el-table-column>
        <el-table-column label="请求耗时" sortable prop="timeTaken" align="left" width="100" show-overflow-tooltip>
          <template slot-scope="scope">
            {{ scope.row.timeTaken }} ms
          </template>
        </el-table-column>
      </el-table>
    </div>

  </div>
</template>
<script>
export default {
  data() {
    return {
      updateTime: new Date().getTime(),
      dataSource: [],
      textInfo: {
        'system.cpu.count': { color: 'success', text: 'CPU 数量', unit: '核' },
        'system.cpu.usage': { color: 'success', text: '系统 CPU 使用率', unit: '%' },
        'process.start.time': { color: 'primary', text: '应用启动时间点', unit: '' },
        'process.uptime': { color: 'primary', text: '应用已运行时间', unit: '秒' },
        'process.cpu.usage': { color: 'primary', text: '当前应用 CPU 使用率', unit: '%' }
      }
    }
  },
  mounted() {
    this.loadHttpTrace()
  },
  methods: {
    handleClickUpdate() {
      this.loadHttpTrace()
    },
    loadHttpTrace() {
      this.updateTime = new Date().getTime()
      this.dataSource = []
      this.$store.dispatch('monitorHttpTrace').then(res => {
        const filterData = []
        for (const d of res.traces) {
          if (d.request.method !== 'OPTIONS' && d.request.uri.indexOf('httptrace') === -1) {
            filterData.push(d)
          }
        }
        this.dataSource = filterData
      }).catch((_) => {})
    },
    convert(value, type) {
      if (type === Number) {
        return Number(value * 100).toFixed(2)
      } else if (type === Date) {
        return this.T.formatDate(value * 1000, 'yyyy-MM-dd hh:mm:ss')
      }
      return value
    }
  }

}
</script>
